<template>
  <div class="">
    <h1>分类</h1>
    <!-- 侧边导航是用v-model封装的 对应的子组件是myNav2.vue -->
    <my-input v-model="keyword" @keydown.enter="search"></my-input>

    <div style="display: flex">
      <my-nav :list="navList.data" v-model="select"></my-nav>
      <!-- selet是modelValue和update事件的合写 不止 input可以用其他的子组件也能用 -->

      <van-grid :column-num="3" style="flex: 1">
        <van-grid-item
          v-for="item in result"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
          @click="$router.push('/my')"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import myInput from "../components/myInput.vue";
import myNav from "../components/myNav.vue";
import navList from "../../public/cate.json";
//引入json

import { getcateList } from "../utils/yx";

export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      keyword: "",
      //搜索关键字
      select: 0,
      //侧边导航v-model的值
      result: [],
      //筛选出来的数据
      list: [],
      //所有的数据
    });
    const search = () => {
      console.log("会车搜索");
      data.result = data.list.filter((item) => {
        return item.name.includes(data.keyword);
      });
      //对搜索关键字进行搜索
    };
    //搜索事件
    getcateList().then((res) => {
      console.log(res);
      data.list = res.data;
      data.result = res.data;
    });
    //获取所有的数据 给list和result都是这个数据

    watch(
      () => {
        return data.select;
      },
      //第一个参数是要监听的对象 要记得return
      (newval) => {
        console.log(111);
        if (data.select == 0) {
          data.result = data.list;
        } else {
          data.result = data.list.filter((item) => {
            return item.pid == newval;
          });
        }
      }, //执行函数
      {
        immediate: true,
      }
    );
    //只要select 发生变化 就去筛选 分类的二级导航

    return { ...toRefs(data), search, navList };
  },
  components: {
    myInput,
    myNav,
  },
};
</script>

<style lang="scss"></style>
